import { FC } from 'react'
import useGetComponentInfo from '../hooks/useGetComponentInfo'
import { type ComponentPropsType, getComponentConfByType } from '../../../components/question-components'
import { useDispatch } from 'react-redux'
import { componentAction } from '../../../store/components-reducer'

const ComponentProp: FC = () => {
  const dispatch = useDispatch()
  const { selectedComponent } = useGetComponentInfo()

  if (selectedComponent == null) return <NoProp />

  const { type, props, isLocked, isHidden } = selectedComponent

  const componentConf = getComponentConfByType(type)

  if (componentConf == null) return <NoProp />

  const { Prop } = componentConf

  function changeProps(newProps: ComponentPropsType) {
    if (selectedComponent == null) return

    const { fe_id } = selectedComponent

    dispatch(componentAction.changeComponentProps({ fe_id, newProps }))
  }

  return <Prop {...props} disabled={isLocked || isHidden} onChange={changeProps} />
}

function NoProp() {
  return <div style={{ textAlign: 'center' }}>未选中组件</div>
}

export default ComponentProp
